<template>
  <vis-container class="school-comp" :title="`${title}参评数量分布图-学校`" title-bg-size="528">
    <BarChart :data="chartData" :color="color" :data-zoom-end="30" :unit="unit" />
  </vis-container>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import CommonMixins from './commonMixins'

@Component({
  name: 'SchoolComp',
  mixins: [CommonMixins]
})
export default class SchoolComp extends Vue {
  @Prop({
    type: String
  })
  title!: string
  chartData: { [key: string]: any } = {
    // mock
    // columns: ['省份', '小学', '初中', '高中', '九年一贯制', '十二年一贯制'],
    // rows: [
    //   { 省份: '山西省', 小学: 23, 初中: 25, 高中: 32, 九年一贯制: 40, 十二年一贯制: 50 },
    //   { 省份: '辽宁省', 小学: 17, 初中: 52, 高中: 18, 九年一贯制: 40, 十二年一贯制: 20 },
    //   { 省份: '吉林省', 小学: 34, 初中: 23, 高中: 32, 九年一贯制: 35, 十二年一贯制: 50 },
    //   { 省份: '广东省', 小学: 23, 初中: 33, 高中: 21, 九年一贯制: 36, 十二年一贯制: 50 },
    //   { 省份: '江苏省', 小学: 53, 初中: 44, 高中: 25, 九年一贯制: 39, 十二年一贯制: 50 }
    // ]
    columns: [],
    rows: []
  }
  color = ['#0088D0', '#31C5E9', '#67E0E3', '#A1FFC2', '#FFD643']

  get unit() {
    return this.title === '各学校' ? ' ' : '个'
  }

  transformData(data: any) {
    const { school_atlas_abscissa = [], school_atlas_category = [], school_atlas_data = [] } = data
    const columns: string[] = ['省份', ...school_atlas_category]
    const rows = school_atlas_abscissa.map((province: string, index: number) => {
      const obj = school_atlas_category.reduce((pre: any, cur: any, ind: number) => {
        pre[cur] = school_atlas_data[ind][index]  // 这里的问题
        return pre
      }, {})
      return {
        省份: province,
        ...obj
      }
    })
    this.chartData = {
      columns,
      rows
    }
  }
}
</script>
<style lang="scss" scoped></style>
